<template>
  <div class="white_div">
    <h2>角色管理</h2>
    <el-button size="mini" type="info" @click="add">增加角色</el-button>
    <el-table :data="rolelist" style="width: 50%" class="role_table">
      <el-table-column prop="roleId" label="角色id" width="180">
      </el-table-column>
      <el-table-column prop="roleName" label="角色" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑的弹框 -->

    <el-dialog title="修改角色" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="角色id">
          <el-input v-model="form.roleId" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="form.roleName"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <!-- 树形控件 -->
          <el-tree
            :data="treeList"
            show-checkbox
            default-expand-all
            node-key="perId"
            ref="tree"
            highlight-current
            :props="defaultProps"
            :default-checked-keys="checkedlist"
            @check="per"
          
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updaterole">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 增加的弹框 -->
    <el-dialog title="增加角色" :visible.sync="dialogVisible">
      <el-form ref="forms" :model="forms" label-width="80px">
        <el-form-item label="角色">
          <el-input v-model="forms.roleName"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <!-- 树形控件 -->
          <el-tree
            :data="treeList"
            show-checkbox
            default-expand-all
            node-key="perId"
            ref="tree"
            highlight-current
            :props="defaultProps"
            @check="addpermission"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addroles">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {  mapMutations } = createNamespacedHelpers("tags");
export default {
  data() {
    return {
      permission: {
        pids: [],
        roleId: "",
        roleName: "",
      },
      rolelist: [],
      checkedlist: [],
      dialogFormVisible: false,
      dialogVisible: false,
      form: {
        roleId: "",
        roleName: "",
      },
      forms: {
        pids: [],
        roleName: "",
      },
      formInline: {
        roleName: "",
      },
      treeList: [
        {
          perId: 5,
          perName: "控制面板",
          children: [
            {
              perId: 6,
              perName: "工作台",
              children: [],
            },
            {
              perId: 7,
              perName: "数据分析",
              children: [],
            },
          ],
        },
        {
          perId: 8,
          perName: "日常业务",
          children: [
            {
              perId: 9,
              perName: "靶场管理",
              children: [],
            },
            {
              perId: 10,
              perName: "角色管理",
              children: [],
            },
          ],
        },
        {
          perId: 14,
          perName: "系统管理",
          children: [
            {
              perId: 2,
              perName: "用户管理",
              children: [],
            },
          ],
        },
        {
          perId: 16,
          perName: "个人中心",
          children: [
            {
              perId: 20,
              perName: "个人信息",
              children: [],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "perName",
      },
    };
  },
  methods: {
    ...mapMutations(["addTabs"]),
    per(a, b) {
      // console.log("per", a, b);
      // console.log(b.checkedKeys);
      this.permission.pids = b.checkedKeys
    },
    addpermission(a, b) {
      console.log("per2", a, b);
      console.log(b.checkedKeys);
      this.forms.pids = b.checkedKeys
    },
    add() {
      this.dialogVisible = true;
    },
    async addroles() {
      console.log(this.forms);
      const res = await this.$api.role.addrole(this.forms);
      console.log(res);
      if (res.code == 200) {
        this.$message.success(res.message);
        this.role();
        this.dialogVisible = false;
      }
    },
    async role() {
      const result = await this.$api.role.getrole();
      // console.log(result);
      this.rolelist = result.data.roleList;
    },

    async handleEdit(index, row) {
      console.log("row编辑", row);
      this.permission.rid = row.roleId;
      this.form.roleId = row.roleId;
      this.form.roleName = row.roleName;
      this.dialogFormVisible = true;
      const res = await this.$api.role.permissionbyid(row.roleId);
      console.log("byid", res);
      this.checkedlist = res.data.hasPermission;
    },
    async updaterole() {
      console.log("999999", this.form);
      const result = await this.$api.role.updaterole(this.form);
      this.permission.roleId = this.form.roleId
      this.permission.roleName = this.form.roleName
      console.log("edit", result);
      console.log("角色赋权",this.permission);
      const info = await this.$api.role.permission(this.permission);
      console.log('info',info);
      if (result.code == 200) {
        this.$message.success(result.message);
        this.role();
        this.dialogFormVisible = false;
      }
    },
    async handleDelete(index, row) {
      // console.log("qqqq", row.roleId);
      const res = await this.$api.role.delrole(row.roleId);
      // console.log(res);
      if (res.code == 200) {
        this.$message.success(res.message);
        this.role();
      }
    },
    checkrole() {},
  },
  beforeRouteEnter(to,from,next){
        next(vm=>{
           vm.addTabs(to)
        })
 },
  created() {
    this.role();
  },
};
</script>

<style scoped lang="scss">
.el-table {
  margin-left: 5vw;
}
.white_div {
  background-color: white;
  padding: 2.6042vw;
}
.role_table{
  text-align:center;
  margin-left: 20vw;
}
</style>